<template>
	<view class="page">
		<view class="header">
			<view style="display: flex;margin-top: 12px;margin-bottom: 4px;align-items:center">
				<image src="../../static/page-home-icon-map-pin.png"
					style="height: 16px;width: 14px;margin-left: 10px;padding: 4px;" />
				<text class="head-text" style="font-size: 10px;">
					<!-- 桂林电子科技大学17教 -->
					{{address}}
				</text>
			</view>

			<text class="head-text" style="font-size: 20px;font-weight: 600;margin-left: 14px;">
				{{weather}}
			</text>

			<input class="input-search" disabled="true" confirm-type="search" placeholder="请输入游玩路线关键字"
				@focus="openLocationPicker" @click="openLocationPicker" />
			<image class="search-head-image" src="../../static/page-home-icon-search-bar-image.png"></image>
			<image style="position: absolute; height: 22px;width: 22px;right: 30px;bottom: -18px;"
				src="../../static/page-home-icon-search-copy.png"></image>
		</view>

		<view class="tab-box">
			<uni-segmented-control style="opacity: 0.72;" :current="current" :values="segmentedItems" style-type="text"
				active-color="#0058cb" in-active-color="#cbcbcb" @clickItem="onClickItem" />
		</view>

		<!-- 推荐列表 -->
		<z-paging v-show="current === 0" :fixed="false" ref="paging" v-model="dataListRecommended" :auto="false"
			@query="queryListRecommended" :auto-show-back-to-top="true" :back-to-top-img="backToTopImg"
			:back-to-top-style="backToTopStyle">
			<view v-for="(item, index) in dataListRecommended">
				<view class="list-head-box">
					<image style="height: 48px;width: 48px; border-radius: 50%;" :src="item.avatar" mode="scaleToFill">
					</image>
					<text class="list-title-text">
						{{item.nickname}}
					</text>
					<!-- 	<button class="list-focus-btn">
						关注
					</button> -->

					<button :class="['list-focus-btn', item.isFollow ? 'followed-btn' : 'unfollowed-btn']"
						@click.stop="toggleFollow(item)">
						{{ item.isFollow ? '已关注' : '关注' }}
					</button>


				</view>
				<uni-swiper-dot :info="item.imageList" :current="swiperCurrent" mode="dot" :dots-styles="dotsStyles"
					field="content">
					<swiper v-if="item.imageList.length >0" style="margin-bottom: 8px;height: 558rpx;width: 100%;"
						@change="change" :current="swiperDotIndex" @click="clickToDetails(item)">
						<swiper-item v-for="(imageListItem,index) in item.imageList">
							<view>
								<image style="width: 100%;background-color: white;height: 558rpx;" mode="aspectFill"
									:src="imageListItem"></image>
							</view>
						</swiper-item>
					</swiper>


					<view
						style="position: absolute; display: flex; flex-direction: column; bottom: 20px; left: 16px; width: 450rpx;">
						<view style="display: flex; flex-direction: row; align-items: center;">
							<text class="normal-text"
								style="color: white; font-size: 17px; font-weight: 500; text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);">
								{{item.startRoute}}
							</text>
							<view style="width: 20px; height: 20px; margin: 0 8px 0 8px;">
								<image style="width: 20px; height: 20px;" src="../../static/icon-goTo.png"></image>
							</view>
							<text class="normal-text"
								style="color: white; font-size: 17px; font-weight: 500; text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);">
								{{item.endRoute}}
							</text>
						</view>
						<text class="normal-text"
							style="color: #ACACAC; font-size: 17px; font-weight: 500; text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);">
							{{setDistanceText(item.distance)}}
						</text>
					</view>

					<view
						style="position: absolute; display: flex; flex-direction: column; bottom: 20px; right: 16px; align-items: flex-end;">
						<text class="normal-text"
							style="color: #ACACAC; font-size: 17px; font-weight: 500; text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);">
							{{item.playCount}} 游玩人次
						</text>
						<button class="list-play-btn">游玩路线</button>
						<image style="position: absolute; height: 19px; width: 15px; bottom: 3px; left: 12px;"
							src="../../static/app-logo.png"></image>
					</view>


				</uni-swiper-dot>
				<view
					style="display: flex;align-items:center;color: #7B7B7B;margin-top: 8rpx;flex-direction: row-reverse;padding-right: 12px;">
					<text>{{setNumberText(item.commentCount)}}</text>
					<image style="height: 20px;width: 20px;margin-left: 12px;margin-right: 2px;"
						src="/static/page-home-icon-comment.png"></image>
					<text>{{setNumberText(item.collectCount)}}</text>
					<image @click="fetchPostCollect(item)"
						style="height: 20px;width: 20px;margin-left: 12px;margin-right: 2px;z-index: 2;"
						:src="item.isCollect ? '/static/page-home-icon-search-collect-after.png':'/static/page-home-icon-search-collect.png'">
					</image>
					<text>{{setNumberText(item.loveCount)}}</text>
					<image @click="fetchPostLove(item)"
						style="height: 20px;width: 20px;margin-left: 12px;margin-right: 2px;z-index: 2;"
						:src="item.isLove ? '/static/page-home-icon-like-after.png':'/static/page-home-icon-like.png'">
					</image>
				</view>

				<text class="list-content-text" @click="clickToDetails(item)">
					{{item.title}}
				</text>
			</view>

		</z-paging>
		<!-- 推荐列表 -->

		<!-- 附近列表 -->
		<z-paging v-show="current === 1" :fixed="false" ref="paging1" v-model="dataListNearby" @query="queryListNearby"
			:auto="false" :auto-show-back-to-top="true" :back-to-top-img="backToTopImg"
			:back-to-top-style="backToTopStyle">
			<view v-for="(item, index) in dataListNearby">
				<view class="list-head-box">
					<image style="height: 48px;width: 48px; border-radius: 50%;" :src="item.avatar" mode="widthFix">
					</image>
					<text class="list-title-text">
						{{item.nickname}}
					</text>
					<!-- 	<button class="list-focus-btn">
						关注
					</button> -->

					<button :class="['list-focus-btn', item.isFollow ? 'followed-btn' : 'unfollowed-btn']"
						@click.stop="toggleFollow(item)">
						{{ item.isFollow ? '已关注' : '关注' }}
					</button>


				</view>
				<uni-swiper-dot :info="item.imageList" :current="swiperCurrent" mode="dot" :dots-styles="dotsStyles"
					field="content">
					<swiper v-if="item.imageList.length >0" style="margin-bottom: 8px;height: 558rpx;width: 100%;"
						@change="change" :current="swiperDotIndex" @click="clickToDetails(item)">
						<swiper-item v-for="(imageListItem,index) in item.imageList">
							<view>
								<image style="width: 100%;background-color: white;height: 558rpx;" mode="aspectFill"
									:src="imageListItem"></image>
							</view>
						</swiper-item>
					</swiper>


					<view
						style="position: absolute;display: flex;flex-direction: column;bottom: 20px;left: 16px;width: 450rpx;">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<text class="normal-text"
								style="color:white;font-size: 17px;font-weight: 500;">{{item.startRoute}}</text>
							<view style="width: 20px;height: 20px; margin: 0 8px 0 8px;">
								<image style="width: 20px;height: 20px;" src="../../static/icon-goTo.png"></image>
							</view>

							<text class="normal-text"
								style="color:white;font-size: 17px;font-weight: 500;">{{item.endRoute}}</text>
						</view>
						<text class="normal-text"
							style="color: #ACACAC;font-size: 17px;font-weight: 500;">{{setDistanceText(item.distance)}}</text>
					</view>

					<view
						style="position: absolute;display: flex;flex-direction: column;bottom: 20px;right: 16px;align-items: flex-end;">
						<text class="normal-text"
							style="color: #ACACAC;font-size: 17px;font-weight: 500;">{{item.playCount}} 游玩人次</text>
						<button class="list-play-btn">游玩路线</button>
						<image style="position: absolute;height: 19px;width: 15px;bottom: 3px;left: 12px;"
							src="../../static/app-logo.png"></image>
					</view>

				</uni-swiper-dot>
				<view
					style="display: flex;align-items:center;color: #7B7B7B;margin-top: 8rpx;flex-direction: row-reverse;padding-right: 12px;">
					<text>{{setNumberText(item.commentCount)}}</text>
					<image style="height: 20px;width: 20px;margin-left: 12px;margin-right: 2px;"
						src="/static/page-home-icon-comment.png"></image>
					<text>{{setNumberText(item.collectCount)}}</text>
					<image @click="fetchPostCollect(item)"
						style="height: 20px;width: 20px;margin-left: 12px;margin-right: 2px;z-index: 2;"
						:src="item.isCollect ? '/static/page-home-icon-search-collect-after.png':'/static/page-home-icon-search-collect.png'">
					</image>
					<text>{{setNumberText(item.loveCount)}}</text>
					<image @click="fetchPostLove(item)"
						style="height: 20px;width: 20px;margin-left: 12px;margin-right: 2px;z-index: 2;"
						:src="item.isLove ? '/static/page-home-icon-like-after.png':'/static/page-home-icon-like.png'">
					</image>
				</view>

				<text class="list-content-text" @click="clickToDetails(item)">
					{{item.title}}
				</text>
			</view>

		</z-paging>
		<!-- 推荐列表 -->

		<!-- 最新列表 -->
		<z-paging v-show="current === 2" :fixed="false" ref="paging2" v-model="dataListNewest" @query="queryListNewest"
			:auto="false" :auto-show-back-to-top="true" :back-to-top-img="backToTopImg"
			:back-to-top-style="backToTopStyle">
			<view v-for="(item, index) in dataListNewest">
				<view class="list-head-box">
					<image style="height: 48px;width: 48px; border-radius: 50%;" :src="item.avatar" mode="widthFix">
					</image>
					<text class="list-title-text">
						{{item.nickname}}
					</text>
					<!-- 	<button class="list-focus-btn">
						关注
					</button> -->

					<button :class="['list-focus-btn', item.isFollow ? 'followed-btn' : 'unfollowed-btn']"
						@click.stop="toggleFollow(item)">
						{{ item.isFollow ? '已关注' : '关注' }}
					</button>


				</view>
				<uni-swiper-dot :info="item.imageList" :current="swiperCurrent" mode="dot" :dots-styles="dotsStyles"
					field="content">
					<swiper v-if="item.imageList.length >0" style="margin-bottom: 8px;height: 558rpx;width: 100%;"
						@change="change" :current="swiperDotIndex" @click="clickToDetails(item)">
						<swiper-item v-for="(imageListItem,index) in item.imageList">
							<view>
								<image style="width: 100%;background-color: white;height: 558rpx;" mode="aspectFill"
									:src="imageListItem"></image>
							</view>
						</swiper-item>
					</swiper>


					<view
						style="position: absolute;display: flex;flex-direction: column;bottom: 20px;left: 16px;width: 450rpx;">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<text class="normal-text"
								style="color:white;font-size: 17px;font-weight: 500;">{{item.startRoute}}</text>
							<view style="width: 20px;height: 20px; margin: 0 8px 0 8px;">
								<image style="width: 20px;height: 20px;" src="../../static/icon-goTo.png"></image>
							</view>

							<text class="normal-text"
								style="color:white;font-size: 17px;font-weight: 500;">{{item.endRoute}}</text>
						</view>
						<text class="normal-text"
							style="color: #ACACAC;font-size: 17px;font-weight: 500;">{{setDistanceText(item.distance)}}</text>
					</view>

					<view
						style="position: absolute;display: flex;flex-direction: column;bottom: 20px;right: 16px;align-items: flex-end;">
						<text class="normal-text"
							style="color: #ACACAC;font-size: 17px;font-weight: 500;">{{item.playCount}} 游玩人次</text>
						<button class="list-play-btn">游玩路线</button>
						<image style="position: absolute;height: 19px;width: 15px;bottom: 3px;left: 12px;"
							src="../../static/app-logo.png"></image>
					</view>

				</uni-swiper-dot>
				<view
					style="display: flex;align-items:center;color: #7B7B7B;margin-top: 8rpx;flex-direction: row-reverse;padding-right: 12px;">
					<text>{{setNumberText(item.commentCount)}}</text>
					<image style="height: 20px;width: 20px;margin-left: 12px;margin-right: 2px;"
						src="/static/page-home-icon-comment.png"></image>
					<text>{{setNumberText(item.collectCount)}}</text>
					<image @click="fetchPostCollect(item)"
						style="height: 20px;width: 20px;margin-left: 12px;margin-right: 2px;z-index: 2;"
						:src="item.isCollect ? '/static/page-home-icon-search-collect-after.png':'/static/page-home-icon-search-collect.png'">
					</image>
					<text>{{setNumberText(item.loveCount)}}</text>
					<image @click="fetchPostLove(item)"
						style="height: 20px;width: 20px;margin-left: 12px;margin-right: 2px;z-index: 2;"
						:src="item.isLove ? '/static/page-home-icon-like-after.png':'/static/page-home-icon-like.png'">
					</image>
				</view>

				<text class="list-content-text" @click="clickToDetails(item)">
					{{item.title}}
				</text>
			</view>

		</z-paging>
		<!-- 推荐列表 -->

	</view>



</template>

<script>
	// #ifdef APP-PLUS
	const dom = weex.requireModule('dom');
	// #endif

	import QQMapSdk from '../../common/qqmap-wx-jssdk.js'
	import {
		getPostList,
		postLove,
		postCollect
	} from '../../api/posts.js';
	import {
		postFollow
	} from '../../api/user.js';

	var qqmapsdk;

	export default {
		data() {
			return {
				location: {
					latitude: 0,
					longitude: 0,
				},
				dataListRecommended: [],
				dataListNearby: [],
				dataListNewest: [],
				address: '',
				weather: '正在获取天气',

				segmentedItems: ['推荐', '附近', '最新'],
				current: 0,
				swiperCurrent: 0,
				dotsStyles: { //轮播图下表点样式
					bottom: 0,
					width: 4,
					height: 4,
					border: 'rgba(209, 209, 209, 1.0)',
					backgroundColor: 'rgba(209, 209, 209, 1.0)',
					selectedBorder: '0px',
					selectedBackgroundColor: 'rgba(0, 114, 237, 1.0) '
				},
				swiperDotIndex: 0,
				backToTopImg: '/static/page-home-icon-back-to-top.png', //回到顶部按钮图标
				backToTopStyle: { //回到顶部按钮图标样式
					height: '100rpx',
					width: '100rpx',
				},

			}
		},
		created() {
			this.getLocation()
		},


		methods: {
			change(e) {
				this.swiperCurrent = e.detail.current
			},
			onClickItem(e) {
				// 点击切换page
				console.log("	// 点击切换page")
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			queryListRecommended(pageNo, pageSize) {

				const data = {
					criteria: "推荐",
					ownCoordinates: {
						latitude: this.location.latitude,
						longitude: this.location.longitude,
						name: this.address
					},
					pageNo: pageNo,
					pageSize: pageSize,
				}

				getPostList(data).then(res => {
					console.log("queryListRecommended请求成功:", res)
					this.$refs.paging.complete(res.data)
				}).catch(err => {
					console.log("queryListRecommended请求失败:", err)
					this.$refs.paging.complete(false)
				});

			},

			queryListNearby(pageNo, pageSize) {

				const data = {
					criteria: "附近",
					ownCoordinates: {
						latitude: this.location.latitude,
						longitude: this.location.longitude,
						name: this.address
					},
					pageNo: pageNo,
					pageSize: pageSize,
				}

				getPostList(data).then(res => {
					console.log("queryListNearby请求成功:", res)
					this.$refs.paging1.complete(res.data)
				}).catch(err => {
					console.log("queryListNearby请求失败:", err)
					this.$refs.paging1.complete(false)
				});

			},
			queryListNewest(pageNo, pageSize) {

				const data = {
					criteria: "最新",
					ownCoordinates: {
						latitude: this.location.latitude,
						longitude: this.location.longitude,
						name: this.address
					},
					pageNo: pageNo,
					pageSize: pageSize,
				}

				getPostList(data).then(res => {
					console.log("queryListNewest请求成功:", res)
					this.$refs.paging2.complete(res.data)
				}).catch(err => {
					console.log("queryListNewest请求失败:", err)
					this.$refs.paging2.complete(false)
				});

			},
			openLocationPicker() {

				uni.chooseLocation({
					success: (res) => {

						wx.navigateTo({
							url: "/pages/searchResult/searchResult?resData=" + encodeURIComponent(JSON
								.stringify(res))
						})
					},
					fail: (err) => {
						console.log('选择地址失败:', err);
					}
				});

			},

			clickToDetails(item) {
				console.log("查看页面详情", item)
				uni.navigateTo({
					url: "/packageMixture/pages/postDetails/postDetails?postId=" + item.id
				})
			},
			navigateTosearch() {

			},
			getLocation() {
				qqmapsdk = new QQMapSdk({
					key: 'VEPBZ-UJ4KQ-IAS5R-4U2CW-F4372-SBBAI'
				})

				uni.getLocation({
					type: 'gcj02', // 比较精确
					success: (res) => {

						// 2,地址逆解析  根据经纬度获取实际地址
						this.location.latitude = res.latitude
						this.location.longitude = res.longitude
						console.log("this.location", this.location)
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: (data) => {
								console.log("当前地址信息：", data);
								// 存储 详细地址 和当前获取的经纬度
								let address = data.result.formatted_addresses
									.recommend;
								console.log("onReady", address)
								this.address = address
								let location = {
									latitude: data.result.location.lat,
									longitude: data.result.location.lng,
									name: address
								};
								uni.setStorageSync('address', location);
								this.getWeather(data.result.ad_info.adcode)
								this.$refs.paging.reload();
								this.$refs.paging1.reload();
								this.$refs.paging2.reload();
							},
							fail: (error) => {
								console.error("err:", error)
							},

						})


					},
					fail: (res) => {
						console.log(res)
					}
				})
			},

			setNumberText(count) {
				if (count > 99) {
					return '99+';
				} else {
					return count;
				}
			},
			setDistanceText(distance) {
				if (distance > 1000) {
					var distanceString = (distance / 1000).toFixed(1)

					return '约' + distanceString + '公里'
				} else {
					return '约' + distance + '米'
				}
			},
			async toggleFollow(item) {
				console.log("toggleFollow", item)
				var checkLoginFunction = require('../../common/chechLoginFunction.js')
				if (checkLoginFunction.checkLogin() == '') {
					return
				}

				const data = {
					followedId: item.userId,
					isFollow: !item.isFollow,
				};
				await postFollow(data)
					.then(response => {
						console.log('toggleFollow 点击关注', data, response)
						if (response.message == "ok") {
							const flag = !item.isFollow;

							for (let s of this.dataListRecommended) {
								if (s.userId == item.userId) {
									s.isFollow = flag;
								}
							}

							for (let s of this.dataListNearby) {
								if (s.userId == item.userId) {
									s.isFollow = flag;
								}
							}

							for (let s of this.dataListNewest) {
								if (s.userId == item.userId) {
									s.isFollow = flag;
								}
							}



						} else {

						}
					})
					.catch(error => {
						console.error('点赞失败:', error);
					});
			},
			fetchPostLove(item) {


				console.log('fetchPostLove', item.isLove)
				const data = {
					isLove: !item.isLove,
					nickname: item.nickname,
					postId: item.id,
					title: item.title,
					userId: item.userId
				};
				postLove(data).then(res => {
					console.log("postLove 点击点赞", data, res)
					if (res.message != 'ok') {
						return
					}
					item.isLove = !item.isLove;
					if (item.isLove == true) {
						item.loveCount++;
					} else {
						item.loveCount--;
					}
				}).catch(err => {
					console.log("postLove 点击点赞", err)
				})

			},
			fetchPostCollect(item) {

				console.log('fetchPostCollect', item.isCollect)

				const data = {
					isCollect: !item.isCollect,
					nickname: item.nickname,
					postId: item.id,
					title: item.title,
					userId: item.userId
				};
				postCollect(data).then(res => {
					console.log("postCollect 点击收藏", data, res)
					if (res.code != 200) {
						return
					}
					item.isCollect = !item.isCollect;
					if (item.isCollect == true) {
						item.collectCount++;
					} else {
						item.collectCount--;
					}

				}).catch(err => {
					console.log("postCollect 点击收藏", err)
				})
			},
			getWeather(adcode) {
				uni.request({
					url: 'https://apis.map.qq.com/ws/weather/v1/',
					data: {
						key: 'VEPBZ-UJ4KQ-IAS5R-4U2CW-F4372-SBBAI',
						adcode: adcode,
						type: 'now',
					},

					success: (res) => {
						var infos = res.data.result.realtime[0].infos
						console.log("获取天气成功：", res.data.result.realtime[0].infos)
						this.weather = infos.temperature + '℃ ' + infos.weather
					}

				});


			}
		}
	}
</script>

<style>
	/* #ifndef APP-PLUS */
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
		background-color: white;
	}

	/* #endif */

	.page {
		position: relative;
		flex: 1;
		overflow-y: scroll;
		overflow: hidden;
		padding-top: 10%;
		margin-top: 164px;
	}

	.header {
		padding-top: 10%;
		top: 0px;
		height: 95px;
		position: fixed;
		z-index: 2;
		width: 100%;
		background-color: #1670f1;
		box-shadow: 0 10px 20px 15px #1670f1;
		display: flow;

	}

	.search-head-image {
		position: absolute;
		/* right: 20px; */
		height: 75px;
		width: 75px;
		left: 55%;
		bottom: -2px;
	}

	.input-search {
		background-color: #fff;
		border-radius: 10px;
		font-size: 16;
		width: auto;
		padding: 14px;
		margin: 12px;
	}

	.head-text {
		color: white;
		max-width: 52%;
		display: -webkit-box;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.tab-box {
		width: 100%;
		background-color: white;
		height: auto;
		padding-top: 10%;
		margin-top: 20px;
		top: 110px;
		position: fixed;
		z-index: 1;
		font-weight: 700
	}

	.tab-content-scroll {
		/* margin-top: 166px; */
	}

	.list-head-box {
		width: 100%;
		display: flex;
		align-items: center;
		padding-left: 12px;
		padding-left: 12px;
		margin-top: 12px;
		margin-bottom: 12px;
	}

	.list-title-text {
		color: #181818;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 17px;
		max-width: 60%;
		padding-left: 3%;
		padding-right: 3%;
		font-weight: 400;
		display: -webkit-box;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.list-focus-btn {
		min-width: 60px;
		height: 28px;
		font-size: 14px;
		font-weight: 100;
		align-items: center;
		color: #fff;
		background-color: #1670f1;
		border-radius: 20px;
		position: absolute;
		right: 12px;
		display: flex
	}

	.unfollowed-btn {
		background-color: #2F6EF5;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.followed-btn {
		background-color: #ffffff;
		color: #aaaaaa;
		font-size: 20rpx;
		border: 1px solid #aaaaaa;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;

	}


	.list-play-btn {
		border-radius: 50%;
		color: #FFF;
		background-color: #2F6EF5;
		font-size: 17px;
		width: 115px;
		height: 28px;
		flex-shrink: 0;

		align-items: center;
		border-radius: 20px;
		display: flex;
		justify-content: flex-end;

	}

	.list-content-text {
		color: #181818;
		margin: 12px;
		font-size: 17px;
		font-style: normal;
		font-weight: 400;
		display: -webkit-box;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
</style>